<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js" ></script>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="app"> 
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">采购清单</h3>
              </div>
              <div class="panel-body form-inline">
                <label>编号:<input type="text" class="form-control" v-model="id"></label>            
                <label>商品:<input type="text" class="form-control" v-model="name"></label>            
                <label>单价:<input type="text" class="form-control" v-model="price"></label>            
                <label>数量:<input type="text" class="form-control" v-model="num"></label>      
                <input type="button" value="添加" class="btn btn-primary" @click="add">                 
                <label>搜索名称关键字:<input class="form-control" type="text" v-model="keywords"></label>
              </div>             
        </div>
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.Ctime}}</td>
                    <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
        
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                price:'',
                num:'',
                keywords:'',
                list:[
                    {id:1,name:'可乐',price:4,num:100,Ctime:new Date()},
                    {id:2,name:'xuebi',price:4,num:100,Ctime:new Date()},
                    {id:3,name:'sabi',price:4,num:100,Ctime:new Date()}
                ]
            },
            methods: {
                add(){
                    this.list.push({id:this.id,name:this.name,price:this.price,num:this.num,Ctime:new Date()})
                    this.id=this.name=this.price=this.num=''
                },
                del(id){
                    // this.list.some((item,i)=>{
                    //     if(item.id==id){
                    //         this.list.splice(i,1);
                    //         return ture;
                    //     }
                    // })
                    var index=this.list.findIndex(item=>{
                        if(item.id==id){
                            return true
                        }
                    })
                    this.list.splice(index,1);
                },
                search(keywords){
                    // 保存新的数组
                    // var newList = []
                    // this.list.forEach(item => {
                    //     // 判断循环的记录是否包含的查询的关键字
                    //     if(item.name.indexOf(keywords) != -1){
                    //         // 将循环的记录添加到新的数组中
                    //         newList.push(item)
                    //     }
                    // })
                    // // 返回数组信息
                    // return newList
                    return this.list.filter(item=>{
                        if(item.name.includes(keywords)){
                            return item
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>
